<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2022-09-27 15:28:32
 * @LastEditors: 淏
 * @LastEditTime: 2023-11-25 17:03:25
-->
<template>
  <div>
    <el-date-picker
      size="mini"
      v-model="value"
      type="monthrange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      align="right"
      unlink-panels
      value-format="yyyy-MM"
      :popper-append-to-body="false"
    ></el-date-picker>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'SelectDataMO',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: '本月',
              onClick(picker) {
                picker.$emit('pick', [new Date(), new Date()])
              },
            },
            {
              text: '今年至今',
              onClick(picker) {
                const end = new Date()
                const start = new Date(new Date().getFullYear(), 0)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近六个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setMonth(start.getMonth() - 6)
                picker.$emit('pick', [start, end])
              },
            },
          ],
          disabledDate(time) {
            return time.getTime() > Date.now() // 可选历史天、可选当前天、不可选未来天
            // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
            // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
            // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
          },
        },
        value: '',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      // 被侦听的变量count
      value(value) {
        if (typeof value != 'undefined') {
          this.$emit('getDateMO', value)
        }
      },
    },
    created() {},
    mounted() {},
    // 组件方法
    methods: {},
  }
</script>

<style scoped></style>
